<template>
	<view class="content">		
		<!--账单详细-->
		<view class="content_2">
			<block v-for="(item, index) in orderList" :key='index'>
				<view class="order_view">
					<view class="line_2"></view>
					<view class="order_box">
						<view class="detail_name">交易金额</view>
						<view class="detail" style="color: #63D0D5;">{{item.money}}</view>
					</view>
					<view class="order_box">
						<view class="detail_name">交易类型</view>
						<view class="detail">{{item.type}}</view>
					</view>
					<view class="order_box">
						<view class="detail_name">操作时间</view>
						<view class="detail">{{item.modified_time}}</view>
					</view>
					<view class="order_box">
						<view class="detail_name">处理情况</view>
						<view class="detail">{{item.status}}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {Request} from '../../../../utils/request.js';
	const app = getApp();
	export default {
		data() {
			return {
				choosetab: '1',
				orderList: [],
				//排序状态
				sortstate: '0',
			}
		},
		methods: {
			//升序方法
			compare: function(property) {
				console.log(property)
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},
			//降序方法
			uncompare: function(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1;
				}
			},
			//tab切换
			changeTab: function(id) {
				this.choosetab = id
				if(id == 2) {
					if (this.sortstate == '0') {
						this.orderList.sort(this.compare('year'))
						this.sortstate = '1'
					} else {
						this.orderList.sort(this.uncompare('year'))
						this.sortstate = '0'
					}
				}
				if (id == 3) {
					if (this.sortstate == '0') {
						this.orderList.sort(this.compare('month'))
						this.sortstate = '1'
					} else {
						this.orderList.sort(this.uncompare('month'))
						this.sortstate = '0'
					}
				}
			}
		},
		onLoad() {
			//获取账单列表
			new Request('customer/purse/Get_Customer_Purse/GetPurseList').request(
				()=>{
					return 'POST'
				},
				()=>{
					return {
						openid: app.globalData.openid,
						userid: app.globalData.userid,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
					}
				},
				(res)=>{
					if(res.data.code == 0){
						new Request().showToast(res.data.msg);
						return;
					}
					this.orderList = res.data.data
					this.orderList = this.orderList.map((item, index) =>{
						return {
							id: item.id,
							money: item.money.toFixed(2),
							modified_time: item.modified_time,
							type: item.typeName,
							status: item.status == 1 ? '受理中' : ' 已处理',
						}
					})
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		顶部标签样式
	*/
	.content_1 {
		margin-top: 40upx;
		padding-left: 40upx;
	}

	.tab_view {
		height: 40upx;
		display: flex;
		align-items: center;
	}

	.tab_box {
		height: 40upx;
		display: flex;
		align-items: center;
		margin-right: 80upx;
	}

	.tab_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #B3E9DC;
		margin-right: 10upx;
	}

	.tab_name_none {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #666666;
		margin-right: 10upx;
	}

	.tab_icon {
		height: 28upx;
		width: 28upx;
	}

	/**
	 * 账单详细样式
	 */

	.order_view {
		margin-top: 30upx;
		display: flex;
		flex-direction: column;
	}

	.line_2 {
		height: 20upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
	}

	.order_box {
		height: 80upx;
		padding: 0upx 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.detail_name {
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #999999;
	}

	.detail {
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #999999;
	}
</style>
